/**
 * Created by fanweihua on 2016/12/2.
 */
import React from 'react';
import ActionSheetHtml from './actionSheetHtml.js'
const ActionSheet = React.createClass({
    getInitialState: function () {
        return {
            html: ActionSheetHtml.html,
            javaScriptHtmlIos: ActionSheetHtml.javaScriptHtmlIos,
            javaScriptHtmlAndroid: ActionSheetHtml.javaScriptHtmlAndroid
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtmlIos}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtmlAndroid}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <ActionSheetNav></ActionSheetNav>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = ActionSheet;
const ActionSheetNav = React.createClass({
    componentDidMount: function () {
        ActionSheetHtml._go();
        $(".weui-mask").css({
            "position": "absolute"
        });
        $(".weui-actionsheet").css({
            "position": "absolute"
        });
        $("#iosActionsheet").css({
            "display": "none"
        })
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">ActionSheet</h1>
                    <p className="page__desc">弹出式菜单</p>
                </div>
                <div className="page__bd page__bd_spacing">
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showIOSActionSheet">iOS
                        ActionSheet</a>
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showAndroidActionSheet">Android
                        ActionSheet</a>
                </div>
                <div>
                    <div className="weui-mask" id="iosMask" style={{display: "none"}}></div>
                    <div className="weui-actionsheet" id="iosActionsheet">
                        <div className="weui-actionsheet__menu">
                            <div className="weui-actionsheet__cell">示例菜单</div>
                            <div className="weui-actionsheet__cell">示例菜单</div>
                            <div className="weui-actionsheet__cell">示例菜单</div>
                            <div className="weui-actionsheet__cell">示例菜单</div>
                        </div>
                        <div className="weui-actionsheet__action">
                            <div className="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
                        </div>
                    </div>
                </div>
                <div className="weui-skin_android" id="androidActionsheet" style={{display: "none"}}>
                    <div className="weui-mask"></div>
                    <div className="weui-actionsheet">
                        <div className="weui-actionsheet__menu">
                            <div className="weui-actionsheet__cell">示例菜单</div>
                            <div className="weui-actionsheet__cell">示例菜单</div>
                            <div className="weui-actionsheet__cell">示例菜单</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});